<template>
    <div class="goodlist-main">
        <van-nav-bar title="标题" left-arrow :class="['header-title']" style="background-color:#f2f2f2"
            @click-left="onClickLeft" @click-right="onClickRight">
            <template #left>
                <van-icon :name="newIcon2" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">{{title}}</span>
            </template>
            <template #right>
                <van-icon :name="newIcon1" :badge="shoppingcart" size="25"/>
            </template>
        </van-nav-bar>
        
        <div style="height:46px;width:100%;"></div>

		<van-search v-model="keyword" :clearable="false" placeholder="  搜索">
			<template #left-icon><van-icon/></template>
			<template #right-icon>
				<img :src="serchicon" @click="clickSearch" class="searchicon" alt="">
			</template>
		</van-search>
		<!-- 搜索框 -->
        <van-sticky :offset-top="46">
            <div class="list-tool-tab">
                <p>
                    <img class="list-tool-tab-img lttm1" :src="IsCardOrList?toCardActive:toCard" @click="IsCardOrList=true" alt="">
                    <img class="list-tool-tab-img lttm2" :src="IsCardOrList?toList:toListActive" @click="IsCardOrList=false" alt="">
                    <span>价格排序</span>
                    <img class="list-tool-tab-img lttm3" :src="needSort==0?sortactive:sort" @click="sortgoodlist" alt="">
                </p>
            </div>
        </van-sticky>
        
        

        
        <van-row v-if="ListRef">
            <van-list
                v-model="toloading"
                :finished="finished"
                :immediate-check="false"
                finished-text="没有更多了" :offset="3"
                @load="onLoad">
                <div :class="[IsCardOrList?'goot-list':'goot-list-1']">
                    <div :class="IsCardOrList?'good-item':index%2==0?'good-item-1':'good-item-2'" v-for="(item,index) in goodListArr" :key="index" @click="JumpDetails(item.goods_id)">
                        <span :class="[IsCardOrList?'good-item-title':index%2==0?'good-item-title-1':'good-item-title-2']">{{item.brand}}</span>
                        <div :class="[IsCardOrList?'good-item-img':index%2==0?'good-item-img-1':'good-item-img-2']" :style="{background:`url(${item.image})`}"></div>
                        <span :class="[IsCardOrList?'good-name':index%2==0?'good-name-1':'good-name-2']">{{item.series}}</span>
                        <span :class="[IsCardOrList?'good-admin-pay':index%2==0?'good-admin-pay-1':'good-admin-pay-2']">官方售价:<span class="good-admin-pay-item"><img class="" src="../../assets/img/payblack.png" alt="">{{item.market_price}}</span></span>
                        <span :class="[IsCardOrList?'good-go-pay':index%2==0?'good-go-pay-1':'good-go-pay-2']">GO价: <span class="good-go-pay-item"><img class="" src="../../assets/img/payred.png" alt="">{{item.price}}</span></span>
                    </div>
                </div>
                <template #finished>
                    <img class="defaultpage" src="../../assets/defaultpage/searchpage.png" v-if="goodListArr.length==0" alt="">
                    <span v-if="goodListArr.length>0">没有更多了</span>
                </template>
            </van-list>
        </van-row>
        <!-- 商品 -->

        <menubtn ref="menuredbtn"/>
        <a-back-top>
            <img class="callbackxxx" src="../../assets/img/backtop.png" alt="">
        </a-back-top>
    </div>
</template>
<script>
import menubtn from "../../components/menubtn.vue"
import {_getGoodsList} from '../../service/main.js'
import {_getCarNum} from '../../service/shopcart.js'
export default {
    data(){
        return{
            newIcon2:require('../../assets/img/backicon.png'),
            newIcon1: require('../../assets/img/gouwuche.png'),
            serchicon:require('../../assets/img/searchicon.png'),
            bannerimg:require('../../assets/img/good-list-banner.png'),
            keyword:"",
            brand:"",
            series:"",
            title:"HALF GO",

            toList:require("../../assets/img/good-list-toList.png"),
            toCard:require("../../assets/img/good-list-toCard.png"),
            toListActive:require("../../assets/img/good-list-toListActive.png"),
            toCardActive:require("../../assets/img/good-list-toCardActive.png"),
            sort:require("../../assets/img/good-list-sort.png"),
            sortactive:require("../../assets/img/good-list-sortactive.png"),
            IsCardOrList:true,

            goodListArr:[],
            toloading:false,
            finished:false,
            page:1,
            shoppingcart:0,

            needSort:0,

            btnFlag:false,
            scrollTop:0,

            ListRef:false,
        }
    },
    activated(){
        this.getUserShoppingCart()
        console.log("缓存执行")
        let kw=this.$route.query.kw
        this.keyword=kw
        let bd=this.$route.query.bd
        let ss=this.$route.query.ss
        this.brand=bd
        this.series=ss
        this.page=1
        this.getgoodslist()
        this.ListRef=true
        this.finished=false

        // if(this.scrollTop){
        //     document.documentElement.scrollTop=this.scrollTop;
        // }
        // window.addEventListener("scroll",this.handleScroll)
    },
    mounted(){
        // window.addEventListener("scroll",this.handleScroll)
    },
    deactivated (){
        this.goodListArr=[]
        this.keyword=""
        this.brand=""
        this.series=""
        this.page=1
        // window.removeEventListener("scroll",this.handleScroll)
    },
    destroyed(){
        this.goodListArr=[]
    },
    components:{
        menubtn
    },
    methods:{
        handleScroll(){
            var scrollTop = 
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
            this.scrollTop = scrollTop
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        onClickRight(){
            this.$router.push("/shopcart")
        },
        async getUserShoppingCart(){
			let num=await _getCarNum()
			this.shoppingcart=num
		},
        sortgoodlist(){
            // this.goodListArr.sort((a,b)=>{
            //     return Number(a.price)-Number(b.price)
            // })
            if(this.needSort==1){
                this.needSort=0
            }else{
                this.needSort=1
            }
            this.page=1
            this.finished=false
            this.goodListArr=[]
            this.getgoodslist()
        },
        JumpDetails(id){
            this.$router.push({path:'/details',query: {id}})
        },
        clickSearch(){
            this.goodListArr=[]
            this.brand=""
            this.series=""
            this.page=1
            this.getgoodslist()
        },
        async getgoodslist(){
            let _this=this

            if(this.brand==""&&this.series==""&&this.keyword==""){
                return
            }

            this.toloading=true
            
            await _getGoodsList({
                brand:this.brand,
                series:this.series,
                keyword:this.keyword,
                num:12,
                page:this.page,
                is_sort:_this.needSort
            }).then(res=>{
                if(res.data.length>0){
                    _this.goodListArr.push(...res.data)
                }else{
                    _this.finished=true
                }
                _this.page++
            })
            this.toloading=false
        },
        onLoad(){
            let _this=this
            setTimeout(() => {
                _this.getgoodslist()
            }, 2000);
            console.log("onload")
        }
    }
}
</script>
<style lang="less" scoped>
.goodlist-main{
    min-height: 100vh;
    width: 100%;
    background-color: #f2f2f2;
}
.header-title{
	width: 100%;
	position: fixed !important;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10 !important;
}
.van-search{
    background-color: #f2f2f2 !important;
    color: #333;
    caret-color:#333;
}
.van-search__content{
    // background: #f2f2f2 !important;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
    color: #333;
    caret-color:#333;
}
.van-field__left-icon {
    display: none!important;
}
.searchicon{
    width: 18px;
    height: 18px;
}
input[type=search]{
    color: #333;
    caret-color:#333;
}
.van-field__control{
	color: #333 !important;
    caret-color:#333 !important;
}
.van-field__control::placeholder{
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-webkit-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-moz-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-ms-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}

.goodlist-banner{
    width: 360px;
    height: 120px;
    margin: 0 auto;
    border-radius: 5px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;
    z-index: 2;
    background-color: #f2f2f2;
}
.list-tool-tab-bg{
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
}
.list-tool-tab{
    width: 340px;
    height: 40px;
    margin: 0 auto 0 auto;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
    background-color: #fff;
}
.list-tool-tab p{
    height: 40px;
    margin-bottom: 0;
}
.list-tool-tab-img{
    width: 18px;
}
.lttm1{
    margin-left: 16px;
    margin-right: 33px;
}
.lttm2{}
.list-tool-tab p span{
    margin-left: 163px;
    margin-right: 16px;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 11px;
    line-height: 40px;
    color: #999;
}
.lttm3{}


.defaultpage{
    width: 172px;
    position: absolute;
    top: 30%;
    left: 28%;
}



.goot-list{
    width: 360px;
    margin:15px auto 0 auto;
    background-color: #f2f2f2;
}
.good-item{
    width: 176px;
    height: 240px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.good-item:nth-child(2n){
    float: right;
    margin: 0 0 13px 0;
}
.good-item>img{
    width: 100%;
}
.good-item-img{
    width: 120px;
    height: 70px;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: bottom !important;
    background-size: 90px 60px !important;
    margin: 12px auto 13px auto;
}
.good-item-title{
    display: block;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 28px;
}
.good-name{
    display: block;
    text-align: center;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
}
.good-admin-pay{
    display: block;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang SC','Microsoft YaHei';
}
.good-admin-pay-item{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-go-pay{
    display: block;
    text-align: center;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 3px;
}
.good-go-pay-item{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}


.goot-list-1{
    width: 360px;
    margin: 15px auto 0 auto;
    background-color: #f2f2f2;
}
.good-item-1{
    width: 360px;
    height: 113px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.good-item-2{
    width: 360px;
    height: 113px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}

.good-item-1>img{
    width: 50%;
}
.good-item-2>img{
    width: 50%;
}
.good-item-img-1{
    width: 50%;
    height: 100%;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: center !important;
    background-size: 90px 60px !important;
    // margin: 12px auto 13px auto;
    float: right;
}
.good-item-img-2{
    width: 50%;
    height: 100%;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: center !important;
    background-size: 90px 60px !important;
    // margin: 12px auto 13px auto;
    float: left;
}

.good-item-title-1{
    display: inline-block;
    width: 47.5%;
    text-align: right;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 13px;
}
.good-item-title-2{
    display: inline-block;
    width: 47.5%;
    text-align: left;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 13px;
    float: right;
    clear: right;
}
.good-name-1{
    display: inline-block;
    width: 47.5%;
    text-align: right;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
}
.good-name-2{
    display: inline-block;
    width: 47.5%;
    text-align: left;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
    float: right;
    clear: right;
}
.good-admin-pay-1{
    display: inline-block;
    width: 47.5%;
    text-align: right;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang SC','Microsoft YaHei';
}
.good-admin-pay-2{
    display: inline-block;
    width: 47.5%;
    text-align: left;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang SC','Microsoft YaHei';
    float: right;
    clear: right;
}
.good-admin-pay-item-1{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item-2{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item-1 > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-admin-pay-item-2 > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-go-pay-1{
    display: inline-block;
    width: 47.5%;
    text-align: right;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang SC','Microsoft YaHei';
    // margin-top: 3px;
}
.good-go-pay-2{
    display: inline-block;
    width: 47.5%;
    text-align: left;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang SC','Microsoft YaHei';
    // margin-top: 3px;
    float: right;
    clear: right;
}
.good-go-pay-item-1{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item-2{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item-1>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}
.good-go-pay-item-2>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}

.callbackxxx{
    position: fixed !important;
    bottom: 47px;
    right: 17px;
    width: 50px;
    height: 50px;
}
</style>